<script setup>

import {ChatSquare, MessageBox, Promotion, UserFilled} from "@element-plus/icons-vue";

import 'echarts'
import ve from "@/utils/echarts.js";
import api from "@/api/index.js";

const dt = ref({
  data: ve()
})
const art = reactive({
  Title: 'vue',
  Sid: 'vue',
  Content: 'vue'
})

onMounted(() => {
  /*模拟增加文章*/
  api.potAdd(art).then(
      res => {
        console.log('新增文章内容', res.data.data)
      }
  )
  /*采集展示数据*/
  api.postPv().then(
      res => {
        const Ve = ve(res.data.data)
        console.log('最终的数据', Ve)
        dt.value.data = Ve
      }
  )

})


</script>

<template>
  <div class="card">

    <div class="box">
      <el-icon class="box-icon" style="color: #ee5050">
        <MessageBox/>
      </el-icon>
      <span class="box-t">文章数：10</span>
    </div>

    <div class="box">
      <el-icon class="box-icon" style="color: #7f39a1">
        <UserFilled/>
      </el-icon>
      <span class="box-t">用户数：10</span>
    </div>

    <div class="box">
      <el-icon class="box-icon" style="color: #383ea1">
        <ChatSquare/>
      </el-icon>
      <span class="box-t">留言数：10</span>
    </div>

    <div class="box">
      <el-icon class="box-icon" style="color: #bb2e69">
        <Promotion/>
      </el-icon>
      <span class="box-t">访问数：10</span>
    </div>
  </div>

  <div>

    <v-chart :option=dt.data.valueOf() style="height: 300px"></v-chart>

  </div>
</template>

<style scoped>
.box-t {
  display: block;
  font-size: 20px;
  line-height: 95px;
  float: right;
  padding-right: 30px;
}

.card .box .box-icon {
  font-size: 30px;
  display: block;
  line-height: 100px;
  float: left;
  padding-left: 20px;

}

.card .box {
  flex: 1;
  height: 100px;
  margin: 10px;
  padding: 20px;
  background-color: rgba(234, 228, 228, 0.59);
  border-radius: 15px; /*圆角*/
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /*添加阴影*/
}

.card {
  display: flex; /*弹性模型*/
}
</style>